<!--
 * @PageName: 
 * @Description: 存在问题反馈弹框
 * @FilePath: /glm-mes-pc/src/views/Dialog/hasProblemDialog.vue
-->

<template>
	<el-dialog v-model="isVisible" width="700" :close-on-click-modal="false" :lock-scroll="false" class="comm-dialog problem-dialog">
		<template #header>
			<span class="title">
				<slot name="problemTitle" />
				{{ dialogTitle }}
			</span>
		</template>
		<div class="dialog-conten">
			<el-table :data="problemData" border tooltip-effect="light" max-height="500">
				<el-table-column type="index" label="序号" align="center" width="60">
					<template #default="scope">
						<span>{{ (form.pageNum - 1) * form.pageSize + scope.$index + 1 }}</span>
					</template>
				</el-table-column>
				<el-table-column label="紧急程度" align="center" width="100">
					<template #default="{ row }">
						<span v-if="row.priority === 1">常规</span>
						<span v-if="row.priority === 2" style="color: #be1c1c">紧急</span>
					</template>
				</el-table-column>
				<el-table-column :label="props.problemType === 4 ? '类型' : '问题类型'">
					<template #default="{ row }">
						<span v-if="row.problemType === 1">订单问题</span>
						<span v-else-if="row.problemType === 2">技术问题</span>
						<span v-else-if="row.problemType === 4">幅宽缩率</span>
					</template>
				</el-table-column>

				<el-table-column prop="problemContent" :label="props.problemType === 4 ? '内容' : '问题内容'" show-overflow-tooltip>
					<template #default="{ row }">
						<div class="ellipsis">{{ row.problemType == 4 ? '' : row.problemContent }}</div>
					</template>
				</el-table-column>
				<el-table-column prop="supplier" label="供应商" show-overflow-tooltip />
				<el-table-column label="操作" align="center" width="100">
					<template #default="{ row }">
						<span @click="goProblemDetail(row.problemId)" class="cursor blue-color">查看</span>
					</template>
				</el-table-column>
			</el-table>
			<Pagination
				v-if="total > 0"
				:total="total"
				v-model:page="form.pageNum"
				v-model:limit="form.pageSize"
				@pagination="getProblemList"
				:pageSizes="[10, 20, 30, 50]"
				layout="prev, pager, next, sizes,  total"
				style="margin-top: 0"
			/>
		</div>
	</el-dialog>
</template>

<script setup>
import { getProblemListAPI } from '@/api/problem.js'
const router = useRouter()
const { proxy } = getCurrentInstance()
const emit = defineEmits()
const props = defineProps({
	isShow: {
		type: Boolean,
		required: true
	},
	ydbh: {
		type: String,
		default: ''
	},
	kh: {
		type: String,
		default: ''
	},
	feedbackType: {
		type: String,
		default: ''
	},
	problemType: {
		type: Number,
		default: null
	},
	dialogTitle: {
		type: String,
		default: '反馈列表'
	}
})
const dialogTitle = props.dialogTitle
const isVisible = computed({
	get() {
		return props.isShow
	},
	set() {
		emit('update:isShow', false)
	}
})
const form = ref({
	pageNum: 1,
	pageSize: 10,
	number: proxy.getAccount(),
	feedbackType: props.feedbackType,
	ydbh: props.ydbh,
	kh: props.kh,
	problemType: props.problemType
})
// 查看问题反馈详情
const goProblemDetail = (id) => {
	router.push({ name: 'widthOfClothDetail', params: { id }, query: { problemType: 4 } })
}
const problemData = ref([])
const total = ref(0)
// 获取问题反馈列表
const getProblemList = async () => {
	const { data: res } = await getProblemListAPI(form.value)
	problemData.value = res.records
	total.value = res.total
}
getProblemList()
</script>
